<template>
  <div id="tbMenu" class="tbMenuDiv">
    <ul class="tbMenuUl">
      <li
        v-for="(item, index) in tbMenus"
        :key="index"
        @click.stop="infoClickTb(item.type)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from "vue";
const emit = defineEmits(["infoClickTb"]);
const num = ref(1);

const props = defineProps({
  tbMenus: Array,
});

const infoClickTb = (index) => {
  emit("infoClickTb", index);
};
</script>
<style lang="scss" scoped>
.tbMenuDiv {
  display: none;
  position: absolute;
  .tbMenuUl {
    height: auto;
    width: auto;
    font-size: 14px;
    text-align: left;
    border-radius: 3px;
    border: none;
    background-color: #c4c4c4;
    color: #fff;
    list-style: none;
    padding: 0 10px;

    li {
      width: 140px;
      height: 35px;
      line-height: 35px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.47);

      &:hover {
        // background-color: rgb(26, 117, 158);
        color: rgb(54, 138, 175);
      }
    }
  }
}
</style>
<style lang="scss">
.el-input__wrapper {
  padding: 1px 5px !important;
}
</style>
